<script setup lang="ts">
import { Delete, InfoFilled, Search, ArrowDown, Plus } from '@element-plus/icons-vue'
import { us2zh4DataSourceField } from '@/views/main/platform-resource/data-source/index'

const data = [
  {
    id: '1',
    name: 'kafka测试',
    type: 'kafka',
    createTime: '2023-01-01 12:00:00',
    updateTime: '2023-01-01 12:00:00',
    info: {
      address: '127.0.0.1:9200,127.0.0.1:9300'
    }
  },
  {
    id: '1',
    name: 'es测试',
    type: 'elasticsearch',
    createTime: '2023-01-01 12:00:00',
    updateTime: '2023-01-01 12:00:00',
    info: {
      address: '127.0.0.1:9200,127.0.0.1:9300',
      username:'elastic'
    }
  }
]
</script>

<template>
  <el-card class="data-source">
    <template #header>
      <div class="list-header">
        <div class="left-bar">
          <el-dropdown>
            <el-button type="primary">
              批量操作
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item :icon="Delete as any">删除</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div class="right-bar">
          <el-input size="default" placeholder="请输入关键字">
            <template #append>
              <el-button size="default" :icon="Search as any" />
            </template>
          </el-input>
          <el-button size="default" type="primary">
            添加
            <el-icon class="el-icon--right">
              <plus />
            </el-icon>
          </el-button>
        </div>
      </div>
    </template>
    <el-table :data="data" style="width: 100%">
      <el-table-column type="selection" width="40" />
      <el-table-column type="expand" width="35">
        <template #default="props">
          <el-descriptions :border="true" style="padding: 10px 80px" column="2">
            <el-descriptions-item label="名称">
              {{ props.row.name }}
            </el-descriptions-item>
            <el-descriptions-item label="类型">
              {{ props.row.type }}
            </el-descriptions-item>
            <el-descriptions-item label="创建时间">
              {{ props.row.createTime }}
            </el-descriptions-item>
            <el-descriptions-item label="更新时间">
              {{ props.row.updateTime }}
            </el-descriptions-item>
            <el-descriptions-item
              v-for="(value, key, index) in props.row.info"
              :key="index"
              :label="us2zh4DataSourceField.get(key as string)"
            >
              {{ value }}
            </el-descriptions-item>
          </el-descriptions>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="ID" width="50" />
      <el-table-column prop="name" label="名称" width="180" />
      <el-table-column prop="type" label="类型" />
      <el-table-column prop="createTime" sortable label="创建时间" />
      <el-table-column prop="updateTime" sortable label="更新时间" />
      <el-table-column fixed="right" label="操作" width="160">
        <template #default>
          <el-tooltip effect="dark" content="删除" placement="top">
            <el-button type="danger" size="small" :icon="Delete as any" circle />
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 15px; justify-content: flex-end"
      :small="true"
      background
      layout="prev, pager, next"
      :total="1000"
    />
  </el-card>
</template>

<style scoped lang="scss">
.data-source {
  .list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .right-bar {
      display: flex;
      align-items: center;

      > div {
        margin: 0 5px;
      }
    }
  }
}
</style>
